In the last few months I have been predominantly working on a project for SARD JV called Foundry. Foundry is an online appraisal and revalidation system for the healthcare industry. The system lets healthcare workers create, upload, store and amend documents relevant to their appraisals, when its time for the appraisal the documents are all in one place and can be marked, given feedback and tracked through the various sign-off stages. Finally the entire appraisal portfolio and all supporting evidence can be downloaded in zip archive or PDF format.
Final Foundry Dashboard page.
The brief
Create and implement the designs for the Foundry system using flat designs, css sketching and front-end development.
The Process
The process started with discussions with the team to analyse the project and get an understanding of how it worked and the journey the client would take through the system. This process of discussion continued right through the project and is still continuing as the system develops further.
Initially I came up with flat designs created in Illustrator, to show how the system may look and feel during the different stages of use.
Initially I came up with a wireframe and flat designs created in Illustrator to show how the system may look and feel as the user created forms and went through the journey of appraisal. Once the basic design and structure was chosen, we decided, due to the fluid way the forms are created, to work as a team on designing and styling the system live as it was being built.
First draft of wireframe and early flat concept designs.
Back-end development and Front-end design
The back-end of the system is built on the Bootstrap framework and written in Ruby and Haml by the team at SARD. The process of this had already started before I was involved, my job was to get an understanding of how this was built and implement the front-end design using CSS and SCSS and then apply it where needed within the Haml pages.
I have many years experience as a designer and a fair amount of experience using HTML and CSS to create small, static sites (like this one), this however was an enormous task involving linking Ruby, Haml and SCSS together on a system that creates pages fluidly, live on-site. My knowledge of Ruby and Haml are limited however, so we created a system of working that involved 3 areas overlapping to create the final product.
Diagram showing the working structure of the project.
Final Foundry designs.
The design of forms is interesting and complex, how they look and will be implemented differs from print to web and they should be created with making the user experience as clear and simple as possible, designing a form system that changes the information as it is being used is doubly interesting and doubly complex. We needed to create something that would have consistency to the look, feel and usability, but be flexible enough to have the ability to have forms within form sections as well as embed documents and graphs, for this we chose the Bootstrap framework to build upon. This is a clear structured framework created by the team at Twitter and is in wide use. It is built on a 12 column grid and comes with a large range of existing components and scripts that can be easily adapted to suit. Other elements we needed to create from scratch and include into the framework. All of this needed to be styled in a clear and easy to use fashion. Having created a colour palette and general feel the layout and typography in the early designs, we added a paper texture and divide holes between sections to give it a warmer, more human feel. The base colours were kept to a minimum with clear typography added colours for emphasis, specific elements, alerts or status progress.
The final designs work well with the principles of creating and adapting ongoing forms. The process is still ongoing as we develop the system further but the end build is up and running and already being implemented.
